<template>
  <div class="help">
    <el-tabs v-model="activeName"  class="help-form" >
      <el-tab-pane label="面试申请" name="first" :key="'first'">
        <div style="background: yellow; display: inline">
          <el-form ref="formData" :model="formData" :rules="rules" size="medium" label-width="100px">
            <el-form-item label="班级" prop="classes" >
              <el-select v-model="formData.classes" placeholder="请选择班级" clearable :style="{width: '80%'}" @change="changes" >
                <el-option v-for="(item, index) in classesOptions" :key="index" :label="item.name"
                           :value="item.id" :disabled="item.disabled"  ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="姓名" prop="studentName">
              <el-select v-model="formData.studentName" placeholder="请选择学生" clearable :style="{width: '80%'}">
                <el-option v-for="(item, index) in studentOptions" :key="index" :label="item.name"
                           :value="item.name" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="面试时间" prop="interviewTime">
              <el-date-picker v-model="formData.interviewTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                              :style="{width: '80%'}" placeholder="请选择面试时间" clearable></el-date-picker>
            </el-form-item>
            <el-form-item label="公司名字" prop="companyName">
              <el-input v-model="formData.companyName"  placeholder="请输入公司名字" clearable :style="{width: '80%'}">
              </el-input>
            </el-form-item>
            <el-form-item label="人事名字" prop="hrName">
              <el-input v-model="formData.hrName" placeholder="请输入人事名字" clearable :style="{width: '80%'}">
              </el-input>
            </el-form-item>
            <el-form-item label="人事电话" prop="hrPhone">
              <el-input v-model="formData.hrPhone" placeholder="请输入人事电话" clearable :style="{width: '80%'}">
              </el-input>
            </el-form-item>
            <el-form-item label="面试地址" prop="address">
              <el-input v-model="formData.address" placeholder="请输入面试地址" clearable :style="{width: '80%'}">
              </el-input>
            </el-form-item>
            <el-form-item label="备注" prop="note">
              <el-input v-model="formData.note" type="textarea" placeholder="请输入备注"
                        :autosize="{minRows: 4, maxRows: 4}" :style="{width: '80%'}"></el-input>
            </el-form-item>
            <el-form-item size="large">
              <el-button type="primary" @click="submitForm">提交</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>

      <el-tab-pane label="我要问问题" name="second" :key="'second'">
        <div style="background: green; display: inline">
          <el-form ref="problemFormData" :model="problemFormData" :rules="rules" size="medium" label-width="100px">
            <el-form-item label="姓名" prop="name">
              <el-select v-model="formData.studentName" placeholder="请选择学生" clearable :style="{width: '80%'}">
                <el-option v-for="(item, index) in studentOptions" :key="index" :label="item.name"
                           :value="item.name" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="problemFormData.email" placeholder="请输入邮箱" clearable :style="{width: '80%'}">
              </el-input>
            </el-form-item>
            <el-form-item label="微信" prop="wechat">
              <el-input v-model="problemFormData.wechat" placeholder="请输入微信" clearable :style="{width: '80%'}">
              </el-input>
            </el-form-item>
            <el-form-item label="电话号码" prop="phone">
              <el-input v-model="problemFormData.phone" placeholder="请输入电话号码" clearable :style="{width: '80%'}">
              </el-input>
            </el-form-item>
            <el-form-item label="班级" prop="classes">
              <el-select v-model="formData.classes" @change="changes" placeholder="请选择班级" clearable :style="{width: '80%'}">
                <el-option v-for="(item, index) in classesOptions" :key="index" :label="item.name"
                           :value="item.id" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="日期选择" prop="start_time">
              <el-date-picker v-model="problemFormData.bookedTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                              :style="{width: '80%'}" placeholder="请选择日期" clearable></el-date-picker>
            </el-form-item>
            <el-form-item label="问题类型" prop="note">
              <el-input v-model="problemFormData.problemType" placeholder="请输入问题类型" clearable :style="{width: '80%'}"></el-input>
            </el-form-item>
            <el-form-item label="咨询老师" prop="teacher">
              <el-select v-model="problemFormData.teacher" placeholder="请选择咨询老师" clearable :style="{width: '80%'}">
                <el-option v-for="(item, index) in teacherOptions" :key="index" :label="item.name"
                           :value="item.name" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="问题描述" prop="note">
              <el-input v-model="problemFormData.note" type="textarea" placeholder="请输入问题描述"
                        :autosize="{minRows: 4, maxRows: 4}" :style="{width: '80%'}"></el-input>
            </el-form-item>
            <el-form-item size="large">
              <el-button type="primary" @click="submitForm2">提交</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>
<script>
import { listTeacher, listClass, addInterview, addAssist, listStudent } from "@/api/help/help";
import {getStudentByClass, getStudentByClassId} from "@/api/student/studentMessage";

export default {
  components: {},
  props: [],
  data() {
    return {
      //默认第一个选项卡
      activeName: "first",
      formData: {
        classes: [],
        studentName: undefined,
        interviewTime: null,
        companyName: undefined,
        hrName: undefined,
        hrPhone: '',
        address: undefined,
        note: undefined,
      },
      problemFormData: {
        studentName: undefined,
        email: undefined,
        wechat: undefined,
        phone: undefined,
        classes: [],
        bookedTime: null,
        problemTypes: [],
        teacher: undefined,
        note: undefined,
      },
      classesOptions: [],
      studentOptions: [],
      // rules: {
      //   classId: [{
      //     required: true,
      //     type: 'array',
      //     message: '请至少选择一个classId',
      //     trigger: 'change'
      //   }],
      //   studentName: [{
      //     required: true,
      //     message: '请输入姓名',
      //     trigger: 'blur'
      //   }],
      //   interviewTime: [{
      //     required: true,
      //     message: '请选择面试时间',
      //     trigger: 'change'
      //   }],
      //   companyName: [{
      //     required: true,
      //     message: '请输入公司名字',
      //     trigger: 'blur'
      //   }],
      //   hrName: [{
      //     required: true,
      //     message: '请输入人事名字',
      //     trigger: 'blur'
      //   }],
      //   hrPhone: [{
      //     required: true,
      //     message: '请输入人事电话',
      //     trigger: 'blur'
      //   }],
      //   address: [{
      //     required: true,
      //     message: '请输入面试地址',
      //     trigger: 'blur'
      //   }],
      //   note: [{
      //     required: true,
      //     message: '请输入备注',
      //     trigger: 'blur'
      //   }],
      // },
      classIdOptions: [],
      classIdProps: {
        "multiple": false
      },
      class_idOptions: [],
      problemTypesOptions: [],
      teacherOptions: [],
      class_idProps: {
        "multiple": false
      },
      problemTypesProps: {
        "multiple": false
      },
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getClassIdOptions();
    this.getTeacherOptions();
  },
  mounted() {},
  methods: {
    submitForm() {
      this.$refs['formData'].validate(valid => {
        console.log(this.formData)
        if (valid) {
            addInterview(this.formData).then(response => {
              this.$modal.msgSuccess("新增成功");
            });

        }
      })
    },
   submitForm2() {
      this.$refs['problemFormData'].validate(valid => {
        this.problemFormData.studentName = this.formData.studentName
        if (valid) {
            addAssist(this.problemFormData).then(response => {
              this.$modal.msgSuccess("新增成功");
            });

        }
      })
    },
    resetForm() {
      this.$refs['formData'].resetFields();
    },
    getTeacherOptions() {
      listTeacher().then(res => {
        this.teacherOptions = res.rows
      })
    },
    getClassIdOptions() {
      listClass().then(res => {
        this.classesOptions = res.rows
        console.log(this.classesOptions);
      })
    },
    getStudentOptions() {
      listStudent().then(res => {
        this.studentOptions = res.rows
      })
    },
    changes() {
      this.$refs['formData'].validate(valid => {
        getStudentByClass(this.formData.classes).then(res => {
          this.studentOptions = res
        })
      })
    }
  }

}

</script>
<style rel="stylesheet/scss" lang="scss">
.help {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("../../assets/images/login-background.jpg");
  background-size: cover;
}
.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}
.help-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.help-form {
  border-radius: 6px;
  background: #ffffff;
  width: 521px;
  padding: 25px 25px 5px 25px;
  .el-input {
    height: 38px;
    input {
      height: 38px;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}
</style>







